<template>
  <div class="fpwa">
    <top-nav title="忘记密码" tnName></top-nav>
    <van-steps :active="active">
      <van-step>账户验证</van-step>
      <van-step>修改密码</van-step>
    </van-steps>

    <van-tabs v-model="active">
      <van-tab>
        <van-cell class="fpwa-vc">
          <van-form @submit="onSubmit">
            <van-field v-model="password" type="password" right-icon="closed-eye" name="password" label="登录密码" placeholder="请输入登录密码" :rules="[{ required: true, message: '请输入登录密码' }]" />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">
                验证账户
              </van-button>
            </div>
          </van-form>
        </van-cell>
      </van-tab>
      <van-tab>
        <van-cell class="fpwa-vc">
          <van-form @submit="updatePassWord">
            <van-field v-model="oldPassWord" type="password" name="oldPassWord" label="旧密码" placeholder="请输入旧密码" :rules="[{ required: true, message: '请填写旧密码' }]" />
            <van-field v-model="newPassWord" type="password" name="newPassWord" label="新密码" placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">
                确认修改
              </van-button>
            </div>
          </van-form>
        </van-cell>
      </van-tab>
      <van-tab></van-tab>
    </van-tabs>
    <!-- 返回上一步按钮 -->
    <van-cell class="fpwa-vc" v-if="bol">
      <van-button round type="info" @click="toPrev">上一步</van-button>
    </van-cell>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';

  export default {
    data() {
      return {
        bol:true,
        password: '',
        newPassWord: '',
        oldPassWord: '',
        tk: '',
        active: 0,
      };
    },
    methods: {
      onSubmit() {
        var params = new URLSearchParams();
        params.append('password', this.password);

        this.axios.post("/rlg/user/yzuser",params).then((rs) => {
          if (rs.data.code == 200) {
            // 来到下一步
            this.active = this.active + 1;
            // 保存token
            this.tk = rs.data.data
          } else {
            this.$toast.fail(rs.data.msg)
          }
        });
      },
      updatePassWord() {
        // 第三步，修改密码
        var params = new URLSearchParams();
        params.append('oldPassWord', this.oldPassWord);
        params.append('newPassWord', this.newPassWord);
        params.append('tk', this.tk);

        this.axios.post('/rlg/user/ugmm', params).then((response) => {
          if (response.data.code == 200) {
            // 弹出提示
            this.$toast.success(response.data.data);
            // 上一步按钮消失
            this.bol=false;
            // 清空状态管理中用户信息，注销登陆状态
            this.$store.commit('a',-1);
            // 跳转到登录界面
            this.$router.push("/login")
          } else {
            // token失效
            this.$toast.fail("超时，请重新验证！");
            this.active=0;
          }

        });
      },
      toPrev() {
        this.active = this.active - 1;
        if (this.active < 0) {
          this.active = 0;
        }
      }
    },
    components: {
      TopNav,
    }
  };
</script>

<style>
  .fpwa-vc {
    margin-top: 15px;
  }

  .van-tabs__wrap {
    height: 0px !important;
  }

  .van-cell__value--alone {
    text-align: center !important;
  }
</style>
